<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .banner{
        width: 420px;
        margin: 0 auto;
    }
    .box{
        width: 400px;
        margin: 0 auto;
    }
    .clearfix::after{
        display: table;
        content: "";
        clear: both;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .top{
        width: 400px;
        border: 1px solid #E7E7ED;
        height: 30px;
        line-height: 30px;
        padding: 0 60px;
        box-sizing: border-box;
        font-family: 华文隶书;
        background: url("img/1.gif") no-repeat 30px center;
        margin: 5px 0px;
    }
    .w{
        width: 260px;
    }
    .w h3{
        font-family: 楷体;
        margin: 5px 0px;
    }
    .w p{
        font-size: 12px;
        color: #818181;
        padding: 5px 3px;
        box-sizing: border-box;
    }
    .img img{
        border: 1px solid #E7E7ED;
        padding: 3px;
        box-sizing: border-box;
    }
    .bottom{
        padding: 10px 0px;
        box-sizing: border-box;
        font-size: 12px;
        color:#818181 ;
    }
</style>
<body>
<div class="banner">
    <a href="index.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="new.html">作业三</a>
    <a href="temp.html">作业四</a>
    <div class="box clearfix">
        <div class="top">明星荐片</div>
        <div class="img fl">
            <img src="img/3.gif" alt="">
        </div>
        <div class=" w fl">
            <h3>周秀娜荐片:让子弹飞</h3>
            <p>导演：姜文</p>
            <p>主演：姜文 周润发 葛优</p>
            <p>点评：我最喜欢的要算《让子弹飞》了,超喜欢...[详情]</p>
        </div>
    </div>
    <div class="box clearfix bottom">
        <div >
            <div class="fl">《巴别塔》：好的故事引人深思</div>
            <div class="fr">阿朵</div>
        </div>
    </div>
    <div class="box clearfix bottom">
        <div >
            <div class="fl">《洛杉矶之战》：外星人那么弱智？</div>
            <div class="fr">丁子俊</div>
        </div>
    </div>
    <div class="box clearfix bottom">
        <div >
            <div class="fl">《让子弹飞》：武侠里也可以有爱情</div>
            <div class="fr">周秀娜</div>
        </div>
    </div>
    <div class="box clearfix bottom">
        <div >
            <div class="fl">《剑雨》：好的故事引人深思</div>
            <div class="fr">叶年生</div>
        </div>
    </div>
    <div class="box clearfix bottom">
        <div >
            <div class="fl">《春风沉醉的夜晚》：非常真实</div>
            <div class="fr">如小果</div>
        </div>
    </div>
    <div class="box clearfix bottom">
        <div >
            <div class="fl">《克洛伊》：故事简单却细致</div>
            <div class="fr">刘若英</div>
        </div>
    </div>
</div>
</body>
</html>